<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
        <meta name="description" content="bootstrap admin template">
        <meta name="author" content="">
        <script type="text/javascript" src="../_resource/js/header.js"></script>
        <script>
            var RUN_FUNCS = [];
            var SITE_URL = "http://admin.html.me";
            var CURR_CONTROLLER = "Settings";
            var CURR_ACTION = "index";
            Breakpoints();
        </script>
        <style type="text/css">
            .list-table table td, .list-table table th{background:#fff; text-align:center;}
            .__access{display: none;}
        </style>
    </head>
    <body class="dashboard">
        <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation" id="navbardefaultmodel">
             <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('head_html')"></script>
        </nav>
        <div class="site-menubar">
            <div class="site-menubar-body" id="site-menubar-body">
                <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('nav_html')"></script>
            </div>
        </div>

        <!-- Page -->
        <div class="page">
            <div class="page-content container-fluid">

                <div class="panel form-box " style="" >
                    <div class="panel-body">
                        <form class="validate-form ajax-form" id="bossjobForm">
                            <div id="username-form-item"  class="form-group " style="" >
                                <label for="username" class="control-label ">Username:</label>
                                <div>
                                    <input type="text" name="username" id="username" class="form-control " style="" placeholder="" value="" />
                                </div>
                            </div>
                            <div id="email-form-item"  class="form-group " style="" >
                                <label for="email" class="control-label ">Email<span class="required">*</span>:</label>
                                <div>
                                    <input type="text" name="email" id="email" class="form-control " style="" placeholder=""  value="" disabled="disabled" />
                                </div>
                            </div>

                            <div class="form-group">
                                <button type="button" class="btn btn-lg btn-success" id="user-profile-save">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
                <script type="text/javascript">
                    $(function () {
                        $('#username').val(window._sys['user']['name']);
                        $('#email').val(window._sys['user']['email']);
                        $('#user-profile-save').click(function () {
                            var uid = window._sys['user']['id'],
                                    name = $('#username').val().trim();
                            if (name.length == '') {
                                $.showError('User name can not be empty.', 400);
                                return false;
                            }
                            var userData = {
                                id: uid,
                                name: name,
                            };
                            Api.Put('saveProfile', userData, function (object, error) {
                                if (object['status_code'] && object['message'] && object['status_code'] == 200 && object['message'] == 'OK' && object['data']['id']) {
                                    $.showSuccess('Save user profile successfully.', 400, function () {
                                        window._sys['user']['name'] = userData['name'];
                                        Api.set('user', window._sys['user']);
                                        window.location.reload();
                                    }, 1000);
                                } else {
                                    $.showError('Something error, retry later.', 400);
                                }
                            });
                            return false;
                        });
                    });
                </script>
            </div>

            <!-- Modal -->
            <div class="modal fade" id="confirmModal" aria-hidden="true" role="dialog" tabindex="-1">
                <div class="modal-dialog modal-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <p></p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-primary"></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="alertModal" aria-hidden="true" role="dialog" tabindex="-1">
                <div class="modal-dialog modal-center">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <h4 class="modal-title"></h4>
                        </div>
                        <div class="modal-body">
                            <p></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Modal -->
        </div>
        <!-- End Page -->

        <!-- Footer -->
        <script type="text/javascript" src="../_resource/js/footer.js"></script>

        <script>
                    (function (document, window, $) {
                        'use strict';

                        var Site = window.Site;
                        $(document).ready(function () {
                            Site.run();
                            $('textarea[maxlength]').maxlength({
                                threshold: 1000,
                                placement: 'bottom-left-inside'
                            });

                            $.components.register("datepicker", {mode: "default", defaults: {autoclose: !0}});

                            if (RUN_FUNCS.length > 0) {
                                for (var i = 0; i < RUN_FUNCS.length; i++) {
                                    RUN_FUNCS[i].call();
                                }
                            }
                        });
                    })(document, window, jQuery);


        </script>
    </body>
</html>